﻿<%@ Page Title="" Language="C#" MasterPageFile="~/admin/Layout1.Master" AutoEventWireup="true" CodeBehind="manageMaleClothes.aspx.cs" Inherits="DeVetma.admin.manageMaleClothes" %>
<asp:Content ID="pageStyle" ContentPlaceHolderID="pageStylePlaceholder" runat="server">
    <style type="text/css">
        ul.manager-navbar li a
        {
            height: auto;
            width: 70px;
        }
    </style>
</asp:Content>
<asp:Content ID="content" ContentPlaceHolderID="contentPlaceholder" runat="server">
    <div class="section">
        <div class="section-header">
            <h3>Male Clothes</h3>
            <div class="btn-toolbar section-actions" style="margin-top: 7px">
                <a id="btnAdd" class="btn" href="/admin/addClothes.aspx">
                    <i class="icon-plus-sign"></i>
                    Add Clothes
                </a>
                <div class="btn-group">
                    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="icon-wrench"></i>
                        Actions
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a id="btnEdit" href="/admin/editClothes.aspx">
                                <i class="icon-edit"></i>
                                Edit Selected
                            </a>
                        </li>
                        <li>
                            <a id="btnView" href="/admin/viewClothes.aspx">
                                <i class="icon-eye-open"></i>
                                View Selected
                            </a>
                        </li>
                        <li>
                            <a id="btnDelete" href="#">
                                <i class="icon-trash"></i>
                                Delete Selected
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a id="btnSetPrice" href="#">
                                <i class="icon-barcode"></i>
                                Set Price
                            </a>
                        </li>
                        <li>
                            <a id="btnSetQty" href="#">
                                <i class="icon-pencil"></i>
                                Set Quantity
                            </a>
                        </li>
                    </ul>
                </div>
                 <a href="#" id="btnBack" class="btn">
                    <i class="icon-arrow-left"></i>
                    Back
                </a>
            </div>
        </div>
        <div class="section-body" style="padding-top: 15px;">
            <!-- Table -->
            <table id="tblMaleClothes" class="table table-striped table-bordered table-hover">
				<thead>
					<tr>
						<th>Id</th>
						<th>Description</th>
                        <th>Color</th>
                        <th>Quantity</th>
                        <th>Price</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
            <!-- /Table -->
        </div>
    </div>
</asp:Content>
<asp:Content ID="pageScript" ContentPlaceHolderID="pageScriptPlaceholder" runat="server">
    <script type="text/javascript">
        var tableName = "tblMaleClothes";
        var selectedItemId = null;
        var numOfCols = 5;
        var clothesDb = [];

        $(document).ready(function () {
            setNavigationActive("nav-male-clothes");
            initTable();
            hookActionButtons();
            loadDataFromServer();
        });

        function hookActionButtons() {
            $("#btnEdit").click(function (ev) {
                if (selectedItemId == null) {
                    ev.preventDefault();

                    messageBox("No apparel selected", "Please select an apparel to to edit.",
                        null);
                    return false;
                }

                $(this).attr("href", $(this).attr("href") + "?cID=" + selectedItemId);

                return true;
            });

            $("#btnView").click(function (ev) {
                if (selectedItemId == null) {
                    ev.preventDefault();

                    messageBox("No apparel selected", "Please select an apparel to to view.",
                        null);
                    return false;
                }

                $(this).attr("href", $(this).attr("href") + "?cID=" + selectedItemId);

                return true;
            });

            $("#btnDelete").click(function (ev) {
                ev.preventDefault();

                if (selectedItemId == null) {
                    messageBox("No apparel selected", "Please select an apparel to to delete.",
                        null);
                    return false;
                }

                confirmBox("Delete Apparel " + selectedItemId, "Are you sure you want to delete"
                    + " this apparel: " + selectedItemId + "?", function (resp) {
                        ajax("/admin/manageMaleClothes.aspx/deleteClothes",
                            { cID: selectedItemId }, function (d, s, o) {
                                var data = $.parseJSON(d.d);

                                if (data.succeeded)
                                    loadDataFromServer();

                                messageBox("Delete Apparel", data.message, null);
                            }, null);
                    });

                return false;
            });

            $("#btnSetPrice").click(function (ev) {
                ev.preventDefault();

                if (selectedItemId == null) {
                    messageBox("No apparel selected", "Please select an apparel to set its "
                    + "price.", null);
                    return false;
                }

                var inputs = [];
                inputs[inputs.length] = { id: "txtPrice", name: "Selling Price",
                    validation: "validate[required,min[1.0],custom[number]]", type: "text",
                    placeholder: "Selling Price of Apparel"
                };
                inputBox("Apparel Selling Price",
                    "Please set the new selling price for the apparel.", inputs,
                    function (succeed, context) {
                        if (succeed) {
                            ajax("/admin/manageMaleClothes.aspx/setSellingPrice", {
                                cID: selectedItemId,
                                price: context[0].value
                            },
                                function (d, s, o) {
                                    var data = $.parseJSON(d.d);

                                    if (data.succeeded)
                                        loadDataFromServer();

                                    messageBox("New Selling Price", data.message, null);
                                }, null);
                        }
                    });

                return false;
            });

            $("#btnSetQty").click(function (ev) {
                ev.preventDefault();

                if (selectedItemId == null) {
                    messageBox("No apparel selected", "Please select an apparel to set its"
                    + " quantity.", null);
                    return false;
                }

                var inputs = [];
                inputs[inputs.length] = { id: "txtQty", name: "Quantity on Hand",
                    validation: "validate[required,min[0],custom[integer]]", type: "text",
                    placeholder: "New Quantity on Hand"
                };
                inputBox("Quantity on Hand",
                    "Please set the new quantity on hand for the apparel.", inputs,
                    function (succeed, context) {
                        if (succeed) {
                            ajax("/admin/manageMaleClothes.aspx/setQuantity", {
                                cID: selectedItemId,
                                qty: context[0].value
                            },
                                function (d, s, o) {
                                    var data = $.parseJSON(d.d);

                                    if (data.succeeded)
                                        loadDataFromServer();

                                    messageBox("New Quantity on Hand", data.message, null);
                                }, null);
                        }
                    });

                return false;
            });

            $("#btnBack").click(function (ev) {
                ev.preventDefault();

                return false;
            });
        }

        /* DataTable Functions [START] */
        function initTable() {
            var oTable = $('#' + tableName).dataTable({
                "sDom": "<'table-wrapper'<'dt-well'<lf><'clearfix'>>rt<ip><'clearfix'>>",
                "sPaginationType": "bootstrap",
                "oLanguage": {
                    "sLengthMenu": "_MENU_ clothes per page",
                    "sEmptyTable": "No clothes at the moment."
                },
                "aoColumns": [
                    null,
                    { "sWidth": "40%" },
                    null,
                    { "sWidth": "15%" },
                    { "sWidth": "15%" }
                ]
            });

            $('#' + tableName + " tbody").click(function (e) {
                var el = $(e.target).parent();
                if ($(el).hasClass('info')) {
                    $(el).removeClass('info');
                    selectedItemId = null;
                }
                else {
                    oTable.$('tr.info').removeClass('info');
                    $(el).addClass('info');
                    if ($(el).children().length != numOfCols) {
                        selectedItemId = null;
                        return;
                    }

                    selectedItemId = $(el).children().first().text();
                }
            });
        }

        function loadDataFromServer() 
        {
            $('#' + tableName).dataTable().fnClearTable();
            selectedItemId = null;
            ajax("/admin/manageMaleClothes.aspx/getMaleClothes", null, function (d, s, o) {
                var data = $.parseJSON(d.d);

                if (!data.succeeded) {
                    alert('An error occured while retrieving clothes.\nReason:\n' + data.message);
                    return;
                }

                fillTheTable(data.results);
            }, null);
        }

        function fillTheTable(dataArray) {
            var objs = productsDb = dataArray == null ? [] : dataArray;

            for (var i in objs)
                addToTable(objs[i]);
        }

        function addToTable(obj) {
            $('#' + tableName).dataTable().fnAddData([
                obj.cID,
                obj.cDescription,
                obj.cColor,
                obj.cQuanOnHand,
                obj.cSelling
            ]);
        }

        function addObjToArr(obj) {
            productsDb.push(obj);
        }

        function getObjFromArr(objId) {
            for (var i in productsDb)
                if (productsDb[i].id == objId)
                    return productsDb[i];

            return null;
        }
        /* DataTable Functions [END] */
    </script>
</asp:Content>
